昨天的 [Day 70] [React] JavaScript ES6 Spread Operator (展開運算符)的課程簡單說明了展開運算符，今天的練習不只是只有昨天的上課內容，也會加入一直以來所學的東西。

今天的題目：

//CHALLENGE: Make this app work by applying what you've learnt.
//1. When new text is written into the input, its state should be saved.
//2. When the add button is pressed, the current data in the input should be
//added to an array.
//3. The <ul> should display all the array items as <li>s

要先知道 input 的值並存起來

我先在 input 加上 onChange，並且將文字存在 inputText useState 裡面。

const [inputText, setInputText] = useState("");

  function handleChange(event){
    const newValue = event.target.value;
    setInputText(newValue);
    
  }

<input onChange={handleChange} type="text" value={inputText}/>

把 useState 的東西丟去 array 裡面

這裡一樣是用 useState：

const [items , setItems] = useState([]);

上面的意思是，一開始不會有任何 item，之後再用 setItems 加進來。

接下來要渲染就要用到 map function 了，這邊是之前的筆記：[Day 47] [JavaScript] ES6 - map & forEach

          {items.map(toDoItem =>{
            return <li>{toDoItem}</li>;
          })}
          
          也可以更簡化為：
          
          {items.map(toDoItem => <li>{toDoItem}</li>)}

這邊有用到 arrow function，所以我也有回頭看一下之前的筆記：[Day 53] [JavaScript] ES6 - Arrow functions (3) 練習挑戰: 全部都改成 Arrow function 的寫法！

handle 按下按鈕時所要觸發的 function

  function handleClick(){
    setItems((previous)=>{
      return [...previous, inputText];
    })
  }

這邊的意思是按下去之後，會觸發的是更新 setItems，除了之前的值，還要加上最新的 input 內容。

不過這邊有發現，按按鈕之後不會把輸入的文字清除，所以也要加上把 setInputText 清空。

  function handleClick() {
    setItems((previous) => {
      return [...previous, inputText];
    });
    setInputText("");
  }

看了看 React 部分的課總共有 117 小節，目前只剩下 4 個小節，覺得感動 QQ

回頭看了看是從 2022-09-26 開始寫了第一篇 React 的筆記：[Day 26] [React] React.js 簡單介紹